<script setup lang="ts" name="editText">
import { onMounted } from 'vue'
import useEditText from '@/components/workBench/hooks/editText'
import { useWorkBenchStore } from '@/stores/workBenchStore'
import { storeToRefs } from 'pinia'
import { defineAsyncComponent } from 'vue'
import type { workExitTextExport } from '@/types/loginType'
const {
  articleId,
  titleText,
  mainImgUrl,
  inputFile,
  showMainImg,
  getTitleImgFile,
  collectData,
  getFormData
} = useEditText()

const { contentIndex, articleData } = storeToRefs(useWorkBenchStore())
const { assignTextData, assignImgData, removeType } = useWorkBenchStore()

async function imgUpload(e: HTMLInputElement) {
  if (e.files) {
    const file = e.files[0]
    const url = URL.createObjectURL(file)
    assignImgData({
      name: 'contentImg' + contentIndex.value,
      type: defineAsyncComponent(() => import('@/components/workBench/typeImg.vue')),
      url: url
    })
    // 添加新文本框
    assignTextData({
      name: 'contentText' + contentIndex.value,
      type: defineAsyncComponent(() => import('@/components/workBench/typeText.vue')),
      content: ''
    })
  }
}

defineExpose<workExitTextExport>({
  getFormData
})

onMounted(() => {
  if (!articleId && true) {
    assignTextData({
      name: 'contentText' + contentIndex.value,
      type: defineAsyncComponent(() => import('@/components/workBench/typeText.vue')),
      content: ''
    })
  }
})
</script>

<template>
  <form id="article" @change="collectData($event.target as HTMLInputElement)">
    <section>
      <label for="mianImg">
        <PictureRounded class="svg" v-show="!showMainImg" />
        <img :src="mainImgUrl" alt="" v-show="showMainImg" />
        <input
          ref="inputFile"
          id="mianImg"
          name="mainImg"
          @change="getTitleImgFile($event.target as HTMLInputElement)"
          type="file"
          v-show="false"
        />
      </label>
      <header>
        <textarea ref="titleText" class="art" name="title" placeholder="标题..."></textarea>
      </header>
    </section>
    <article>
      <section v-for="item in articleData" :key="item.name">
        <component :is="item.type" :data="item" @removeData="removeType"></component>
      </section>
      <section>
        <label for="msgUpload">
          <Plus class="files" />
          <input
            id="msgUpload"
            type="file"
            accept="image/*"
            v-show="false"
            @change="imgUpload($event.target as HTMLInputElement)"
          />
        </label>
      </section>
    </article>
  </form>
</template>

<style scoped lang="less">
.art:focus {
  outline: none;
}

.svg {
  width: 64px;
  height: 64px;
  color: var(--color2);
}

form {
  > section {
    height: 84px;
    display: flex;
    align-items: center;
    gap: 20px;
    > label {
      cursor: pointer;
      padding: 10px;
      > img {
        width: 64px;
        height: 64px;
        border-radius: var(--radius);
      }
    }

    > header {
      width: 100%;
      height: 100%;
      position: relative;

      > textarea {
        resize: none;
        border: none;
        text-align: left;
        padding: 2px 10px;
        background-color: unset;
        width: 80%;
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        height: 42px;
        line-height: 42px;
        font-size: 24px;
        white-space: nowrap;
        color: var(--color3);
      }
    }
  }

  > article {
    border-top: 2px dashed var(--color2);
    margin-top: 10px;
    width: 100%;
    min-height: 600px;
    > section {
      width: 100%;
      margin-top: 10px;

      > label {
        cursor: pointer;
        display: block;
        height: 60px;
        margin: 0 auto;
        border: 1px dashed var(--color2);
        border-radius: var(--radius);
        > .files {
          display: block;
          margin: 0 auto;
          width: 60px;
          height: 60px;
          color: var(--color2);
          pointer-events: none;
        }
      }
    }
  }
}
</style>
